<template>
    <div class="tool-bar">
        <div class="left-wrap">{{ productName }}</div>
        <div class="right-wrap">
            <el-button type="text" @click="handleReload">
                <div class="btn-wrap">
                    <img width="22" height="22" src="@/assets/images/drag/reset.png" />
                    <span class="name">{{ $t('drag.123456-51') }}</span>
                </div>
            </el-button>
            <el-button type="text" @click="handleExportJSON">
                <div class="btn-wrap">
                    <img width="22" height="22" src="@/assets/images/drag/export.png" />
                    <span class="name">{{ $t('drag.123456-52') }}</span>
                </div>
            </el-button>
            <el-button type="text" @click="$refs.file.click()">
                <div class="btn-wrap">
                    <img width="22" height="22" src="@/assets/images/drag/import.png" />
                    <span class="name">{{ $t('drag.123456-53') }}</span>
                </div>
            </el-button>
            <el-button type="text" @click="handleCatJson">
                <div class="btn-wrap">
                    <img width="22" height="22" src="@/assets/images/drag/cat_json.png" />
                    <span class="name">{{ $t('drag.123456-54') }}</span>
                </div>
            </el-button>
            <el-button type="text" @click="handlePreview">
                <div class="btn-wrap">
                    <img width="22" height="22" src="@/assets/images/drag/preview.png" />
                    <span class="name">{{ $t('drag.123456-55') }}</span>
                </div>
            </el-button>
            <el-button type="text" @click="handleSave">
                <div class="btn-wrap">
                    <img width="22" height="22" src="@/assets/images/drag/save.png" />
                    <span class="name">{{ $t('drag.123456-56') }}</span>
                </div>
            </el-button>
            <input type="file" ref="file" id="file" accept=".json" @change="handleImportJSONChange" style="display: none" />
        </div>
        <!-- 查看json -->
        <el-dialog title="查看JSON" :visible.sync="dialogVisible" width="700px">
            <div class="JSONView">
                <div>
                    {
                    <br />
                    "productId": {{ id }},
                    <br />
                    "name": {{ pageSetup.name }},
                    <br />
                    "templateJson": {{ JSON.stringify(pageSetup) }},
                    <br />
                    "component": {{ JSON.stringify(pageComponents) }},
                    <br />
                    }
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import FileSaver from 'file-saver'; // 导出JSON

export default {
    name: 'ToolBar',
    computed: {
        ...mapState({
            id: (state) => state.dragEditor.id,
            pageSetup: (state) => state.dragEditor.pageSetup,
            pageComponents: (state) => state.dragEditor.pageComponents,
        }),
    },
    props: {
        productId: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            productName: this.$t('drag.123456-57'),
            dialogVisible: false,
        };
    },
    watch: {
        productId() {
            this.setProductId();
        },
    },
    methods: {
        ...mapActions('dragEditor', ['setId', 'setPageSetup', 'setPageComponents', 'resetPageComponents', 'setRightcom']),
        // 产品Id赋值
        setProductId() {
            console.log(this.productId);
            this.setId(this.productId);
        },
        // 重置
        handleReload() {
            this.$modal
                .confirm(this.$t('drag.123456-58'))
                .then(async () => {
                    await this.resetPageComponents();
                    this.setRightcom('decorate');
                })
                .catch(() => {});
        },
        // 查看json
        handleCatJson() {
            this.dialogVisible = true;
        },
        // 导入json
        handleImportJSONChange() {
            const file = document.getElementById('file').files[0];
            const reader = new FileReader();
            reader.readAsText(file);
            const _this = this;
            reader.onload = function () {
                let ImportJSON = JSON.parse(this.result); // this.result为读取到的json字符串，需转成json对象
                //console.log(ImportJSON);
                const { productId, templateJson, component } = ImportJSON; // 导入JSON数据
                _this.setId(productId);
                _this.setPageSetup(JSON.parse(templateJson));
                _this.setPageComponents(JSON.parse(component));
            };
        },
        // 导出json
        handleExportJSON() {
            const data = JSON.stringify({
                productId: this.id,
                name: this.pageSetup.name,
                templateJson: JSON.stringify(this.pageSetup),
                component: JSON.stringify(this.pageComponents),
            });
            const blob = new Blob([data], { type: '' });
            FileSaver.saveAs(blob, `${this.pageSetup.name}.json`);
        },
        // 预览
        handlePreview() {
            this.$emit('preview', true);
        },
        // 保存
        handleSave() {
            this.$emit('save');
        },
    },
};
</script>

<style lang="scss" scoped>
.tool-bar {
    height: 100%;
    background: #ffffff;
    border-bottom: 1px solid #ebedf0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    padding: 0 20px;

    .left-wrap {
        font-size: 18px;
        line-height: 33px;
        font-weight: 700;
    }

    .right-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;

        .btn-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 8px;

            .name {
                font-weight: 400;
                font-size: 12px;
                color: #323232;
                margin-top: 8px;
            }
        }
    }
}
.JSONView {
    width: 660px;
    padding: 0 20px 0 20px;
    height: 560px;
    overflow: auto;
}
</style>
